<template>
  <el-dialog title="修改密码" class="editPass" width="350px" :visible.sync="isDial">
      <div class="info"><span>姓名：{{userInfo.realName}}</span><span>职位：{{userInfo.roleName}}</span></div>
    <el-form :model="form" size="mini" :rules='rules' ref="editPassword">
      <el-form-item prop='password'>
        <el-input v-model="form.password" type="password" class="leftBorder" autocomplete="off" placeholder="请输入新密码"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <span class="tips">密码必须大于6位</span>
      <el-button type="primary" size="mini" @click="editPwd">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            form:{
                password:"",
            },
            isDial:false,
            userInfo:'',
            rules: {
                password: [
                    {
                        pattern: /^[a-zA-Z0-9]{6,18}$/,
                        required: true,
                        message: "密码必须长度大于6位的大小写字母或数字",
                        trigger: "blur"
                    }
                ]
            },
        }
    },
    created(){
        this.$root.$on("editPassword",data=>{
            this.isDial=true
            let form=this.form;
            form.password=''
            this.userInfo=data
        })
    },
    methods:{
        editPwd(){
            let that=this
            let userInfo=that.userInfo
            let form=that.form
            this.$refs.editPassword.validate(valid => {
                if(!valid){
                    return
                }
                let url='admin/password?phone='+userInfo.phone+'&password='+form.password
                request.ajaxPost({
                url,
                that,
                type:'PUT',
                fn(res) {
                    that.$message({
                        type: "success",
                        message: "修改成功"
                    });
                    that.isDial=false
                    that.$root.$emit('search','on')
                }
                });
            })
        }
    }
};
</script>
<style lang="less" scoped>
.editPass{
    text-align: left;
    .dialog-footer{
        margin-top: -20px;
        .tips{
            float: left;
            font-size: 12px;
            color: #5E6D82;
            line-height: 28px;
        }
    }
    .info{
        margin-top: -20px;
        margin-bottom: 20px;
        span{
            margin-right: 20px;
            color: #5E6D82;
            font-size: 12px;
            font-weight: 600;
        }
    } 
    .el-dialog__body{
        padding: 0px 20px !important;
    }
}
</style>
